<template>
  <div class="checkIn">
    <NavBar />
    <div class="checkIn-content">
      <div class="checkIn-card">
        <ul class="cur-flex">
          <li v-for="(item, index) in cardData.reportOfferings" :key="index" class="card-item" @click="toggleCard(item, index)" :class="{'flipped': item.show}">
            <div class="card-option front">
              <img src="../../assets/checkIn/card-close.png" alt="">
            </div>
            <div class="card-option back">
              <img v-show="item.code !== 5" src="../../assets/checkIn/card-open.png" alt="">
              <img v-show="item.code === 5" src="../../assets/checkIn/card-thanks.png" alt="">
              <div v-show="item.code !== 5" class="item-text">
                <span class="item-value">{{item.offering}}</span>中亿币</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="checkIn-progress">
        <ul class="cur-flex cur-justify-center">
          <li v-for="(item, index) in [1,2,3,4,5,6,7]" :key="index">
            <div v-if="index<6" class="progress-item progress-item1 progress-img1" :class="{'progress-img2': index<cardData.dayNum}">
              <span>{{'第'+ (index+1)+'天'}}</span>
            </div>
            <div v-else class="progress-item progress-item2  progress-img3" :class="{'progress-img4': index<cardData.dayNum}">
              <span>{{'第'+ (index+1)+'天'}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div style="width: 0;height: 0;overflow: hidden;">
      <div id="card-layer">
        <div class="card-open">
          <img v-show="openItem.code !== 5" src="../../assets/checkIn/card-open.png" alt="">
          <img v-show="openItem.code === 5" src="../../assets/checkIn/card-thanks.png" alt="">
          <div v-show="openItem.code !== 5" class="item-text">
            <span class="item-value">{{openItem.offering}}</span>中亿币</div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import * as api from '@/service/api'
// import $ from 'jquery'
export default {
  components: {
    NavBar,
    Footer
  },
  data () {
    return {
      loading: false,
      openItem: {},
      isOpen: false,
      cardData: {
        reportOfferings: []
      }
    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  created () {
    this.getCheckIn()
  },
  methods: {
    async getCheckIn () {
      let res = await api.getCheckIn()
      this.cardData = res.data
      if (this.cardData.isReport) {
        this.cardData.reportOfferings.map((item) => {
          item.show = true
        })
      } else {
        this.cardData.reportOfferings.map((item) => {
          item.show = false
        })
      }
    },
    async saveCheckIn () {
      await api.saveCheckIn({
        code: this.openItem.code
      })
      this.getCheckIn()
    },
    openCard () {
      // let that = this
      window.layer.open({
        title: '',
        btn: [],
        skin: 'addTag',
        type: 1,
        btnAlign: 'c',
        content: $('#card-layer'),
        yes: function (index, layero) {
          window.layer.close(index)
        }
      })
    },
    toggleCard (item, index) {
      let curItem = Object.assign({}, item)
      curItem.show = !curItem.show
      this.cardData.reportOfferings.splice(index, 1, curItem)
      if (!this.isOpen && !this.cardData.isReport) {
        this.openItem = curItem
        this.cardData.reportOfferings.map((item) => {
          item.show = true
        })
        this.isOpen = true
        this.openCard()
        this.saveCheckIn()
      }
    }
  }
}
</script>
<style lang="scss">
.checkIn {
  .layui-layer-btn {
    padding: 0;
  }
  background-color: #f2f2f2;
  // padding-bottom: 60px;
  &-content {
    width: 1200px;
    height: 770px;
    margin: 0 auto;
    margin-top: 30px;
    background: url("../../assets/checkIn/bg.png");
  }
  &-card {
    padding-top: 180px;
    ul {
      padding: 0 50px;
    }
    .card-item {
      margin: 0 auto;
      width: 186px;
      height: 251px;
      position: relative;
      transform-style: preserve-3d; //关键代码
      transition: transform 1s;
    }
    .card-option {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; //关键代码
      border-radius: 20px;
    }
    .item-text {
      position: absolute;
      color: #632c0e;
      font-size: 20px;
      font-weight: bold;
      bottom: 60px;
      left: 52px;
    }
    .item-value {
      color: #cf202d;
      font-size: 30px;
      padding-right: 4px;
    }
    .front {
    }
    .back {
      transform: rotateY(180deg);
    }
    .front img,
    .back img {
      width: 186px;
      height: 251px;
      border-radius: 6px;
    }
    .flipped {
      transform: rotateY(180deg);
    }
  }
  &-progress {
    ul {
      margin-top: 15px;
    }
    li {
      vertical-align: bottom;
    }
    .progress-item {
      margin-right: -2px;
      position: relative;
      span {
        position: absolute;
        bottom: -25px;
        color: #fff;
      }
    }
    .progress-item1 {
      width: 128px;
      height: 85px;
    }
    .progress-item2 {
      width: 40px;
      height: 85px;
    }
    .progress-img1 {
      background: url("../../assets/checkIn/progress1.png") no-repeat;
      background-position: bottom;
    }
    .progress-img2 {
      background: url("../../assets/checkIn/progress2.png") no-repeat;
      background-position: bottom;
    }
    .progress-img3 {
      background: url("../../assets/checkIn/progress3.png") no-repeat;
    }
    .progress-img4 {
      background: url("../../assets/checkIn/progress4.png") no-repeat;
    }
  }
  .card-open {
    position: relative;
    img {
      width: 289px;
      height: 394px;
    }
    .item-text {
      position: absolute;
      color: #632c0e;
      font-size: 26px;
      font-weight: bold;
      bottom: 120px;
      left: 105px;
    }
    .item-value {
      color: #cf202d;
      font-size: 38px;
      padding-right: 4px;
    }
  }
}
</style>
